<template>
    <div class="root">
        <div class="tianqi">
            <div class="more fa fa-angle-double-down">下滑查看完整天气</div>
            <div class="left"></div>
            <div class="right">
                <span>{{weather.result.city}}</span>
                <span>{{weather.result.realtime.info}} {{weather.result.realtime.temperature}}℃</span>
            </div>
        </div>
        <div class="selection">
            <div class="cencontainer topp">
                <div class="padc top">
                    <div class="headcontainer">
                        <img :src="userMsg.header" width="100%" height="100%" alt="">
                    </div>
                    <div class="textcontainer">
                        <div class="name"><h2>{{userMsg.userName}}</h2></div>
                        <div class="id">手机号：{{userMsg.phone}}</div>
                    </div>
                </div>
            </div>
            <div class="cencontainer sec" @click="outlogin">
                <div class="padc">
                    <div class="icon"><i class="fa fa-cog fa-lg"></i></div>
                    <div class="text">退出登录</div>
                    <div class="pic">
                        <div class="head col"></div>
                        <div class="right fa fa-angle-right fa-2x"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="confim_bg" ref="confirm">
            <div class="confirm">
                <div class="text">
                    <h3>退出登录</h3>
                    <p>确定要退出登录吗</p>
                </div>
                <div class="btns">
                    <button @click="yes">是</button>
                    <button @click="no">否</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return {
            userMsg:null,
            count:0,
            weather:{"reason":"查询成功!","result":{"city":"福州","realtime":{"temperature":"12","humidity":"99","info":"小雨","wid":"07","direct":"西风","power":"3级","aqi":"40"},"future":[{"date":"2020-04-02","temperature":"12\/16℃","weather":"小雨","wid":{"day":"07","night":"07"},"direct":"持续无风向"},{"date":"2020-04-03","temperature":"13\/15℃","weather":"中雨转小雨","wid":{"day":"08","night":"07"},"direct":"持续无风向"},{"date":"2020-04-04","temperature":"13\/16℃","weather":"阴","wid":{"day":"02","night":"02"},"direct":"持续无风向"},{"date":"2020-04-05","temperature":"11\/16℃","weather":"小雨","wid":{"day":"07","night":"07"},"direct":"东风转持续无风向"},{"date":"2020-04-06","temperature":"12\/15℃","weather":"小雨","wid":{"day":"07","night":"07"},"direct":"持续无风向"}]},"error_code":0}
        }
    },
    methods:{
        outlogin(){
            this.$refs.confirm.style.display = 'flex'
            this.$refs.confirm.style.opacity = '1'
        },
        async getweather(){
            // const res = await this.$http.post('/api/weather', '福州')
            // console.log(res)
            // if(this.count === 0){
            //     this.$store.state.weather = res.data
            // }
            // console.log(res)
            this.$store.state.weather = this.weather.result

            // console.log(this.$store.state.weather)
        },
        yes(){
            window.sessionStorage.removeItem('token')
            window.sessionStorage.removeItem('userMsg')
            this.$router.push('/')
        },
        no(){
            this.$refs.confirm.style.display = 'none'
        }
    },
    created(){
        this.getweather()
        this.$store.state.userMsg.push(window.sessionStorage.getItem('userMsg'))
        this.userMsg = JSON.parse(this.$store.state.userMsg[0])
        this.$store.state.userMsg.length = 0
        // console.log(this.userMsg)
    }
}
</script>

<style lang="less" scoped>
    .root{
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        display: flex;
        background-color: rgb(238, 238, 238);
        position: relative;
    }
    .tianqi::after{
        content:'';
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background-color: rgba(0, 0, 0, .1);
    }
    .tianqi{
        position: relative;
        width: 100%;
        height: 150px;
        background:url(../assets/weatherBg/sum.jpg) no-repeat;
        background-size: cover;
        display: flex;
        opacity: 1;
        .more{
            width: 100%;
            height: 35px;
            position: absolute;
            top:30px;
            text-align: center;
            left: 0;
            font-size: 18px;
            // background-color: #4cd137;
            color: rgb(41, 148, 149);
        }
        .left{
            width: 100px;
            height: 100%;
            flex-grow: 1;
        }
        .right{
            width: 100px;
            height: 100%;
            // background-color: #2ecc71;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            span{
                color: #353b48;
                display: block;
                width: 100%;
                height: 30px;
                text-align: right;
                padding-right: 10px;
            }
        }
    }
    .cencontainer{
        width: 100%;
        height: 50px;
        background-color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        .padc{
            width: 95vw;
            height: 100%;
            // border: 1px solid #ccc;
            display: flex;
            .icon{
                width: 40px;
                height: 50px;
                // background-color: #3498db;
                display: flex;
                justify-content: center;
                align-items: center;
            }
            .text{
                height: 50px;
                width: 30px;
                // background-color: #9b59b6;
                letter-spacing: 1px;
                flex-grow: 1;
                display: flex;
                align-items: center;
                padding-left: 8px;
            }
            .pic{
                width: 55px;
                height: 50px;
                // background-color: #2ecc71;
                display: flex;
                justify-content: center;
                align-items: center;
                .head{
                    height: 40px;
                    width: 40px;
                    background-color: #2c3e50;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    // flex-grow: 1;
                }
                .col{
                    background-color: #fff;
                }
                .right{
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    color: rgb(230, 230, 230);
                }
            }
        }
        .top{
            position: absolute;
            height: 70px;
            top: -40px;
            display: flex;
            .headcontainer{
                width: 70px;
                height: 70px;
                background-color: #2ecc71;
            }
            .textcontainer{
                width: 50px;
                height: 70px;
                flex-grow: 1;
                .name{
                    color: #fff;
                }
                // background-color: rosybrown;
                div{
                    width: 100%;
                    height: 50%;
                    display: flex;
                    align-items: center;
                    padding-left: 10px;
                }
            }
        }
    }
    .topp{
        height: 70px;
    }
    .sec{
        margin-top: 5px;
    }
    .confim_bg{
        position: absolute;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, .3);
        display: flex;
        justify-content: center;
        align-items: center;
        // transition: 2s all ease-in-out;
        opacity: 0;
        // z-index: 5;
        display: none;
        .confirm{
            width: 50%;
            height: 14%;
            // background-color:skyblue;
            border-radius: 15px;
            margin-top: 0px;
            overflow: hidden;
            background-color: rgb(250, 250, 250);
            .text{
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                width: 100%;
                height: 62%;
                // background-color: magenta;
                font-size: 13px;
                border-bottom: 1px solid #ccc;
                h3{
                    margin-bottom: 5px;
                }
                p{
                    color: rgb(125, 125, 125);
                }
            }
            .btns{
                width: 100%;
                height: 38%;
                button{
                    width: 50%;
                    height: 100%;
                    border: none;
                    outline: none;
                    color: rgb(3, 123, 255);
                    background: none;
                }
                button:nth-child(1){
                    border-right: 1px solid #ccc;
                }
            }
        }
    }
</style>
